<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>腾飞健康管理平台</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <style>
        .word {
            position: absolute;
            right: 10px;
            bottom: 10px;
            color: #aaa;
            font-size: 12px;
        }
    </style>
</head>
<body style="padding: 15px">
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">套餐名称</label>
        <div class="layui-input-block">
            <input type="text" name="packageName" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">适用性别</label>
        <div class="layui-input-block">
            <select name="applySex" lay-verify="required">
                <option value="">请选择</option>
                <option value="不限性别">不限性别</option>
                <option value="男性">男性</option>
                <option value="女性">女性</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">适用范围</label>
        <div class="layui-input-block">
            <select name="applyRange" lay-verify="required">
                <option value="">请选择</option>
                <option value="不限群体">不限群体</option>
                <option value="婴幼儿">婴幼儿</option>
                <option value="青少年">青少年</option>
                <option value="中年">中年</option>
                <option value="老年">老年</option>
            </select>
        </div>
    </div>
    <!--项目选择-->
    <div id="test"></div>

    <!--<div class="layui-form-item">
        <label class="layui-form-label">项目总价格</label>
        <div class="layui-input-block">
            <input type="text" name="price" autocomplete="off" placeholder="￥" class="layui-input"
                   disabled>
        </div>
    </div>-->
    <div style="padding-top: 15px;"></div>
    <div class="layui-form-item">
        <label class="layui-form-label">套餐价格</label>
        <div class="layui-input-block">
            <input type="text" name="price" autocomplete="off" placeholder="￥" class="layui-input"
                   lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
                <textarea name="note" placeholder="请输入内容" class="layui-textarea" style="position: relative"
                          maxlength="500"
                          onpropertychange="if(value.length>500) value=value.substr(0,500)"
                          oninput="wordLeg(this);" lay-verify="required"></textarea>
            <div class="word">
                <span class="text_count">0</span> / <span class="num_count" id="numCount">500</span>
            </div>
            <div style="margin-top: 20px"></div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="submitItem">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="lib/layui/layui.js"></script>
<script>
    layui.use(["form", "jquery", "layer", "transfer"], function () {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.jquery;
        let transfer = layui.transfer;

        //用于保存每个穿梭框的id
        let transferMap = new Map();

        form.on("submit(submitItem)", function (data) {
            let labItems = "";
            let radItems = "";
            let supItems = "";
            let speItems = "";
            let medItems = "";
            let cliItems = "";

            transferMap.forEach(function (value, key) {
                if (key == "实验室检查") {
                    let selectedItems = transfer.getData(value);
                    for (let i = 0; i < selectedItems.length; i++) {
                        labItems = labItems + selectedItems[i].value + ",";
                    }
                    console.log(labItems);
                } else if (key == "放射类检查") {
                    let selectedItems = transfer.getData(value);
                    for (let i = 0; i < selectedItems.length; i++) {
                        radItems = radItems + selectedItems[i].value + ",";
                    }
                    console.log(radItems);
                } else if (key == "超声类检查") {
                    let selectedItems = transfer.getData(value);
                    for (let i = 0; i < selectedItems.length; i++) {
                        supItems = supItems + selectedItems[i].value + ",";
                    }
                    console.log(supItems);
                } else if (key == "窥镜类检查") {
                    let selectedItems = transfer.getData(value);
                    for (let i = 0; i < selectedItems.length; i++) {
                        speItems = speItems + selectedItems[i].value + ",";
                    }
                    console.log(speItems)
                } else if (key == "医技类检查") {
                    let selectedItems = transfer.getData(value);
                    for (let i = 0; i < selectedItems.length; i++) {
                        medItems = medItems + selectedItems[i].value + ",";
                    }
                    console.log(medItems);
                } else if (key == "临床类检查") {
                    let selectedItems = transfer.getData(value);
                    for (let i = 0; i < selectedItems.length; i++) {
                        cliItems = cliItems + selectedItems[i].value + ",";
                    }
                    console.log(cliItems);
                }
            });

            let loadIndex = "";
            let requestData;

            console.log(data.field);
            requestData = "packageName=" + data.field.packageName + "&applySex=" + data.field.applySex + "&applyRange=" + data.field.applyRange + "&price=" + data.field.price + "&note=" + data.field.note +
                "&labItems=" + labItems + "&radItems=" + radItems + "&supItems=" + supItems + "&speItems=" + speItems + "&medItems=" + medItems + "&cliItems=" + cliItems;

            $.ajax({
                url: "/executeAddExaminePackage",
                type: "post",
                dataType: "json",
                data: requestData,
                async: true,
                beforeSend: function () {
                    loadIndex = layer.load();
                },
                success: function (responseResult) {
                    layer.close(loadIndex);
                    if (responseResult.code == 1) {
                        layer.msg(responseResult.msg, {icon: 1, time: 1000});
                    } else {
                        layer.msg(responseResult.msg, {icon: 2, time: 1000});
                    }
                },
                error: function () {
                    layer.close(loadIndex);
                    layer.msg("服务器错误。", {icon: 2, time: 1000});
                    console.log("建立套餐请求失败！");
                }
            });
            return false;
        });

        //获取第一级项目类型数据（level==1）
        function getTypeLevel1List() {
            let typeLevel1List;
            $.ajax({
                url: "/getTypeLevel1List",
                type: "get",
                dataType: "json",
                async: false,
                contentType: "application/json; charset=utf-8",
                success: function (responseData) {
                    typeLevel1List = responseData;
                },
                error: function () {
                    console.log("获取第一级项目类型数据请求失败");
                }
            });
            return typeLevel1List;
        }

        //根据第一级项目类型数据渲染出分割线legend
        $(document).ready(function () {
            let typeLevel1List = getTypeLevel1List();
            if (typeLevel1List != null && typeLevel1List.length > 0) {
                for (let i = 0; i < typeLevel1List.length; i++) {
                    $("#test").append("<fieldset class='layui-elem-field layui-field-title' style='margin-top: 10px' >" +
                        "<legend style='font-size: 20px'>" + typeLevel1List[i].typeName + "</legend></fieldset><div style='float: none; clear: both'></div><div id='" + typeLevel1List[i].itemTypeId + "' name='" + typeLevel1List[i].typeName + "'></div><div style='float: none; clear: both'></div>");
                    transferDiv(typeLevel1List[i].itemTypeId);
                }
            }
        });

        //根据id找到对应的div；同时该id也是一级项目类型id所以同时使用该id获取对应的二级项目类型数据typeLevel2List,然后获取该类型的所有项目，渲染穿梭框
        function transferDiv(id) {
            let itemsData;
            let typeName = $("#" + id).attr("name");
            if (typeName == "实验室检查") {
                itemsData = getItems("/getLabExamineItems");
            } else if (typeName == "超声类检查") {
                itemsData = getItems("/getAllSupItems");
            } else if (typeName == "放射类检查") {
                itemsData = getItems("/getAllRadItems");
            } else if (typeName == "窥镜类检查") {
                itemsData = getItems("/getAllSpeItems");
            } else if (typeName == "医技类检查") {
                itemsData = getItems("/getAllMedItems");
            } else if (typeName == "临床类检查") {
                itemsData = getItems("/getAllCliItems");
            }
            transferRender(id, itemsData, typeName);
        }

        //根据url获取检查项目
        function getItems(getItemsUrl) {
            let items;
            $.ajax({
                url: getItemsUrl,
                type: "get",
                dataType: "json",
                async: false,
                success: function (responseData) {
                    items = responseData;
                },
                error: function () {
                    console.log(getItemsUrl + "请求失败");
                }
            });
            return items;
        }

        //获取每种类型的项目并渲染成穿梭框；
        function transferRender(id, itemsData, typeName) {
            console.log(itemsData);
            transferMap.set(typeName, id);
            let titleName;
            transfer.render({
                elem: "#" + id,
                id: id,
                title: ["未选项目", "选中项目"],
                height: 300,
                width: 300,
                data: itemsData,
                parseData: function (examineItem) {
                    if (typeName == "实验室检查") {
                        titleName = examineItem.examineName;
                    } else if (typeName == "超声类检查") {
                        titleName = examineItem.examineName + "-" + examineItem.examineArea;
                    } else if (typeName == "放射类检查") {
                        titleName = examineItem.examineName + "-" + examineItem.examineArea + "-" + examineItem.examineMethod;
                    } else if (typeName == "窥镜类检查") {
                        titleName = examineItem.examineName + "-" + examineItem.examineSample;
                    } else if (typeName == "医技类检查") {
                        titleName = examineItem.examineName;
                    } else if (typeName == "临床类检查") {
                        titleName = examineItem.itemType + "-" + examineItem.examineName;
                    }
                    return {
                        "value": examineItem.examineItemId,
                        "title": titleName,
                    }
                }
            });
        }

        //备注输入框字数显示
        window.wordLeg = function (obj) {
            var currleg = $(obj).val().length;
            var length = $(obj).attr('maxlength');
            if (currleg >= length) {
                layer.msg('字数请在' + length + '字以内');
            } else {
                $('.text_count').text(currleg);
            }
        }
    });
</script>
</body>
</html>